{% extends "base.html" %}

{% block stylesheets %}
<style>
  .setup-complete::before, .setup-incomplete::before, .setup-unknown::before {
      position: absolute;
      left: 10px;
      font-size: 24px;
      line-height: 1;
  }

  .setup-incomplete::before {
    content: '✗';
    color: rgb(244, 67, 54);
  }

  .setup-complete::before {
    content: '✓';
    color: rgb(76, 175, 80);
  }

  .setup-unknown::before {
    content: '?';
    color: rgb(255, 193, 7);
  }
</style>
{% endblock %}


{% block content %}
<div class="jumbotron">
  <div class="container">
    <h1>课程</h1>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-2 offset-md-1">
      <div class="nav flex-column nav-pills" role="tablist">
        <a class="nav-link active" id="course-syllabus-tab" data-toggle="pill" href="#syllabus" role="tab">教学大纲</a>
        {% if user %}
          <a class="nav-link" id="course-grades-tab" data-toggle="pill" href="#grades" role="tab">成绩</a>
          <a class="nav-link" id="course-identity-tab" data-toggle="pill" href="#identity" role="tab">身份信息</a>
        {% endif %}
      </div>
    </div>
    <div class="col-md-8">
      <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show active" id="syllabus" role="tabpanel">
          {% if dojo.course.syllabus %}
            {{ dojo.course.syllabus | markdown }}
          {% endif %}
        </div>

        {% if user %}
          <div class="tab-pane fade show" id="grades" role="tabpanel">
            <h3>{{ name }} current grade in the class: <code style="font-size: 2em">{{ letter_grade }}</code> ({{ "%.2f%%" | format(100 * overall_grade) }})</h3>
            <br>
            <div id="grades" class="row">
              <div class="col-md-12">
                <table class="table table-striped">
                  <thead>
                    <tr>
                      <td scope="col"><b>姓名</b></td>
                      <td scope="col"><b>日期</b></td>
                      <td scope="col"><b>权重</b></td>
                      <td scope="col"><b>进度</b></td>
                      <td scope="col"><b>学分</b></td>
                    </tr>
                  </thead>
                  <tbody>
                    {% for assessment_grade in assessment_grades %}
                    {% if assessment_grade.credit is boolean %}
                      {% set credit = "✓" if assessment_grade.credit else "✕" %}
                    {% elif assessment_grade.credit is number %}
                      {% set credit = "%.2f%%" | format(100 * assessment_grade.credit) %}
                    {% endif %}
                    <tr>
                      <td>{{ assessment_grade.name }}</td>
                      <td>{{ assessment_grade.date }}</td>
                      <td>{{ assessment_grade.weight }}</td>
                      <td>{{ assessment_grade.progress }}</td>
                      <td>{{ credit }}</td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <div class="tab-pane fade" id="identity" role="tabpanel">
            <form method="post" id="identity-form" autocomplete="off">
              <div class="form-group">
                <b><label for="enter-name">{{ identity_name }}</label></b>
                <small class="form-text text-muted">这将共享给本道馆的所有管理员。</small>
                <br>
                <input class="form-control" id="identity" name="identity" type="text" value="{{ identity_value or '' }}">
              </div>

              <div id="identity-results" class="form-group">
              </div>

              <div class="form-group text-right">
                <input class="btn btn-md btn-primary btn-outlined" id="_submit" name="_submit" type="submit" value="Update">
              </div>
            </form>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script defer src="{{ url_for('views.themes', path='js/dojo/course.js') }}"></script>
{% endblock %}
